<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>组件基础</title>

</head>

<body>
  <script src="./src/vue.js"></script>
  <!--基本示例-->
  <!-- <div id="components-demo">
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
  </div>
  <script>
    Vue.component('button-counter', {
      data: function () {
        return {
          count: 0
        }
      },
      template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
    })
    new Vue({ el: '#components-demo' })
  </script> -->




  <!--通过 Prop 向子组件传递数据-->
  <!-- <div id="components-demo">
    <blog-post title="My journey with Vue"></blog-post>
    <blog-post title="Blogging with Vue"></blog-post>
    <blog-post title="Why Vue is so fun"></blog-post>
  </div>
  <script>
    Vue.component('blog-post', {
      props: ['title'],
      template: '<h3>{{ title }}</h3>'
    })
    new Vue({ el: '#components-demo' })
  </script> -->




  <!--传递数组-->
  <!-- <div id="blog-post-demo">
    <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title"></blog-post>
  </div>
  <script>
    Vue.component('blog-post', {
      props: ['title'],
      template: '<h3>{{ title }}</h3>'
    })
    new Vue({
      el: '#blog-post-demo',
      data: {
        posts: [
          { id: 1, title: 'My journey with Vue' },
          { id: 2, title: 'Blogging with Vue' },
          { id: 3, title: 'Why Vue is so fun' }
        ]
      }
    })
  </script> -->




  <!--单个根元素-->
  <!-- <div id="blog-post-demo">
    <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title"  v-bind:content="post.content"></blog-post>
  </div>
  <script>
    Vue.component('blog-post', {
      props: ['title', 'content'],
      // template: '<h3>{{ title }}</h3><div v-html="content"></div>'
      template: '<div class="blog-post"><h3>{{ title }}</h3><div v-html="content"></div></div>'
    })
    new Vue({
      el: '#blog-post-demo',
      data: {
        posts: [
          { id: 1, title: 'My journey with Vue', content: 'content1' },
          { id: 2, title: 'Blogging with Vue', content: 'content2' },
          { id: 3, title: 'Why Vue is so fun', content: 'content3' }
        ]
      }
    })
  </script> -->

  <!--重构一下这个 <blog-post> 组件了，让它变成接受一个单独的 post prop-->
  <!-- <div id="blog-post-demo">
    <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post"></blog-post>
  </div>
  <script>
    Vue.component('blog-post', {
      props: ['post'],
      template: `
        <div class="blog-post">
          <h3>{{ post.title }}</h3>
          <div v-html="post.content"></div>
        </div>
      `
    })
    new Vue({
      el: '#blog-post-demo',
      data: {
        posts: [
          { id: 1, title: 'My journey with Vue', content: 'content1' },
          { id: 2, title: 'Blogging with Vue', content: 'content2' },
          { id: 3, title: 'Why Vue is so fun', content: 'content3' }
        ]
      }
    })
  </script> -->



  <!--监听子组件事件-->
  <!-- <div id="blog-post-demo">
    <div :style="{ fontSize: postFontSize + 'em' }">
      <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post" v-on:enlarge-text="postFontSize += 0.1">
      </blog-post>
    </div>
  </div>
  <script>
    Vue.component('blog-post', {
      props: ['post'],
      template: `
        <div class="blog-post">
          <h3>{{ post.title }}</h3>
          <button v-on:click="$emit('enlarge-text')">
            Enlarge text
          </button>
          <div v-html="post.content"></div>
        </div>
      `
    })
    new Vue({
      el: '#blog-post-demo',
      data: {
        posts: [
          { id: 1, title: 'My journey with Vue', content: 'content1' },
          { id: 2, title: 'Blogging with Vue', content: 'content2' },
          { id: 3, title: 'Why Vue is so fun', content: 'content3' }
        ], 
        postFontSize: 1
      }
    })
  </script> -->

  <!--使用事件抛出一个值-->
  <!-- <div id="blog-post-demo">
    <div :style="{ fontSize: postFontSize + 'em' }">      
      <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post" v-on:enlarge-text="onEnlargeText">
      </blog-post>
    </div>
  </div>
  <script>
    Vue.component('blog-post', {
      props: ['post'],
      template: `
      <div class="blog-post">
        <h3>{{ post.title }}</h3>
        <button v-on:click="$emit('enlarge-text', 0.1)">
          Enlarge text
        </button>
        <div v-html="post.content"></div>
      </div>
    `
    })
    new Vue({
      el: '#blog-post-demo',
      data: {
        posts: [
          { id: 1, title: 'My journey with Vue', content: 'content1' },
          { id: 2, title: 'Blogging with Vue', content: 'content2' },
          { id: 3, title: 'Why Vue is so fun', content: 'content3' }
        ],
        postFontSize: 1
      },
      methods: {
        onEnlargeText: function (enlargeAmount) {
          this.postFontSize += enlargeAmount
        }
      }
    })
  </script> -->


  <!--在组件上使用 v-model-->
  <!-- <div id="app">
    <custom-input v-model="searchText"></custom-input>
  </div>
  <script>
    Vue.component('custom-input', {
      props: ['value'],
      template: `
      <input
        v-bind:value="value"
        v-on:input="$emit('input', $event.target.value)"
        >
      `
    })
    var vm= new Vue({
      el: '#app',
      data: {
        searchText:1
      },
    })
  </script> -->




  <!--通过插槽分发内容-->
  <!-- <div id="app">
    <alert-box>
      Something bad happened.
    </alert-box>
  </div>
  <script>
    Vue.component('alert-box', {
      template: `
        <div class="demo-alert-box">
          <strong>Error!</strong>
          <slot></slot>
        </div>
      `
    })
    var vm= new Vue({
      el: '#app',
     
    })
  </script> -->



  <!--动态组件-->
  <!--TODO-->
</body>

</html>